{% extends "frame/tabpages.html" %}
{% block content %}
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5" id="id_searchProductForm">{% csrf_token %}
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" type="text" name="filter_name"  placeholder="产品名称" id="id_name">
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <input class="layui-input" type="text" name="filter_spec"  placeholder="产品规格" id="id_spec">
                            </div>
                            <div class="layui-inline layui-show-xs-block xxxListButton">
                                <!--不能用button,如果使用button的话,会发送两次请求.
                                    button 的type button默认为type的值为submit,submit会默认提交一次,
                                    再加上js里的提交就会出现重复提交的问题,把type的值改为button就可以解决问题了-->
                                <!--button class="layui-btn"  data-type="reload" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button-->
                                <a class="layui-btn"  id="searchBtn" data-type="reload" lay-submit=""><i class="layui-icon">&#xe615;</i>查询</a>
                                <a class="layui-btn"  id="resetBtn" data-type="reset" lay-submit=""><i class="layui-icon">&#xe666;</i>重置</a>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table id="id_productlist" class="layui-table layui-form"  lay-filter="f_productlist">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> 
{% include "frame/searchBindMode.html" %}
</body>
{% endblock %}

{% block jsscript %}
<script>
layui.use(['jquery','table'], function(){
    var table = layui.table;
    var $ = layui.$

    var loading = layer.load(0, {shade: false});
    table.render({
        elem: '#id_productlist', 
        method: 'post',
        url: "{% url 'product:show_categoryDetail' category_id %}", //数据接口
        height: 'full-180',
        page: true, //开启分页
        limit: 10,
        loading: true,
        defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips',
            }],
        cols: [[ //表头
            {type: 'numbers', title: '序号',        width:'5%', align:'center'},
            {field: 'category', title: '产品类别',  width:'15%', align:'center', sort: true},
            {field: 'name', title: '产品名称',      width:'15%', align:'center', sort: true},
            {field: 'spec', title: '产品规格',      width:'20%', align:'center', sort: true},
            {field: 'total', title: '库存',          width:'10%', align:'center', sort: true},
            {title: '关联订单',                     width:'10%', align:'center', sort: true, 
                templet: function(d){
                    var str = "<a style='cursor: pointer' onclick=\"xadmin.open('关联的订单', '{% url 'product:show_productAssociateOrder' '000' %}')\">查看</a>";
                    str = str.replace('000', d.id) ;
                    return str; 
                }
            },
            {title: '关联客户',                     width:'10%', align:'center', sort: true, 
                templet: function(d){
                    var str = "<a style='cursor: pointer' onclick=\"xadmin.open('关联的客户', '{% url 'product:show_productAssociateCustomer' '000' %}')\">查看</a>";
                    str = str.replace('000', d.id) ;
                    return str; 
                }
            },
            {field: 'created',  title: '创建时间',  align:'center', sort: true}
        ]],
        done:function(res){
            layer.close(loading);
        }
    });  
    
    active = {
        reload: function(){
            table.reload('id_productlist', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                   filter_name: $("input[name=filter_name]").val(),
                   filter_spec: $("input[name=filter_spec]").val(),
                }
            });
        },
        reset: function(){
            $("#id_searchProductForm")[0].reset();
            $("#id_refresh").click();
        }
    };

    $('.xxxListButton .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});

</script>
{% endblock %}
